import * as echarts from "echarts";

export default {
  mounted() {
    const myChart = this.initEchart(this.id);
    const option = this.deployOption();
    option && myChart.setOption(option);
  },
  methods: {
    // 返回颜色或渐变色
    color(style, type = "linear") {
      if (!style) return "#08b89d";
      if (style.color) return style.color;
      return {
        type: type,
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 1,
            color: style.startColor, // 100% 处的颜色
          },
          {
            offset: 0,
            color: style.endColor, // 0% 处的颜色
          },
        ],
      };
    },
    // 需要隐藏的属性
    hiddenDeploy(arr) {
      const newObj = {};
      arr.map((item) => {
        newObj[item] = {
          show: false,
        };
      });
      return newObj;
    },
    // 配置圆环的分段数
    subSum() {
      const data = [];
      for (let i = 1; i <= this.data.subSum; i++) {
        if (i % 2 === 0) {
          data.push({ value: 100, name: "2" });
        } else {
          data.push({ value: 100, name: "1" });
        }
      }
      return data.length > 0
        ? data
        : [
            { value: 100, name: "1" },
            { value: 100, name: "2" },
          ];
    },
    // 请求圆心图片
    requireImgUrl(url) {
      if (!url) return "";
      // 设想如果用户不传图片、传错图片的情况，如何处理
      let img;
      try {
        // 这一步要对用户传值的处理，避免出现相对路径问题
        img = require("@/" + url.replace(/@\//, ""));
      } catch (err) {
        // 如果图片读取错误，使用错误图片
        // 支持传值，如果不传应使用线上图片代替
        img = require("@/assets/error.png");
      }
      return img;
    },
    // 初始化图表对象
    initEchart(id) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      return myChart;
    },
  },
};
